<template>
  <hv-visual-property-sub-row>
    <template #title>数据来源：</template>
    <template #content>
      <a-select
        :value="dataSourceType"
        size="small"
        :placeholder="dataSourceTypePlaceholder"
        @change="dataSourceTypeChange"
        dropdownClassName="hv-dark-select-dropdown"
      >
        <a-select-option
          :value="option.value"
          v-for="(option, itemIndex) in dataSourceList"
          :key="option.value + itemIndex"
          >{{ option.label }}</a-select-option
        >
      </a-select>
    </template>
  </hv-visual-property-sub-row>
  <hv-visual-property-sub-row>
    <template #title>数据：</template>
    <template #content>
      <div class="hv-flex hv-flex-justify-content-between">
        <a-button type="primary" size="small" @click="viewData()" ghost>
          <hv-dynamic-icon iconName="EyeOutlined" /> 查看数据
        </a-button>
        <a-button type="primary" size="small" @click="editData()" ghost>
          <hv-dynamic-icon iconName="EditOutlined" /> 编辑数据
        </a-button>
      </div>
    </template>
  </hv-visual-property-sub-row>
  <Component
    :is="currentComp"
    v-if="currentComp"
    v-model:visible="dialogVisible"
    :dataSource="dataSource"
    :readonly="readonly"
    :title="readonly ? '查看数据' : '编辑数据'"
    @update:dataSource="updateDataSource"
  />
</template>

<script setup lang="ts">
import { ref, shallowRef, type Component, type PropType } from 'vue';
import type DataSourceGroupType from '@/visual/commons/types/data-source-group-type';
import { httpRequestMethodConst } from '@/visual/commons/consts/dashboard-const';
import HvVisualPropertySubRow from "./VisualPropertySubRow.vue";

const props = defineProps({
  dataSourceType: {
    type: String,
    default: '',
  },
  dataSourceTypePlaceholder: {
    type: String,
    default: '请选择数据来源...',
  },
  dataSourceList: {
    type: Array as PropType<{ value: string; label: string }[]>,
    default: () => [],
  },
  dataSourceDataConfig: {
    type: Object as PropType<{
      editComp: {
        [prop: string]: Component;
      };
      viewComp: {
        [prop: string]: Component;
      };
    }>,
    default: () => {},
  },
  dataSource: {
    type: Object as PropType<DataSourceGroupType>,
    default: ()=>{
      return {
      type: '',
      jsonConfig: {
        data: '{}',
      },
      httpRequestConfig: {
        method: httpRequestMethodConst.get,
        autoReload: false,
        reloadTime: 60000,
        url: '',
        params: {},
        resultHandle: '(data) => data'
      }
    }
    },
  },
});

const emit = defineEmits(['update:dataSourceType', 'update:dataSource']);

const dialogVisible = ref<boolean>(false);
const readonly = ref<boolean>(false);
const currentComp = shallowRef<Component>();

const dataSourceTypeChange = (val: string) => {
  emit('update:dataSourceType', val);
};

const updateDataSource = (data) => {
  emit('update:dataSource', data);
};

const editData = () => {
  const comp = props.dataSourceDataConfig.editComp[props.dataSourceType];
  if (comp) {
    currentComp.value = comp;
    dialogVisible.value = true;
    readonly.value = false;
  }
};

const viewData = () => {
  const comp = props.dataSourceDataConfig.viewComp[props.dataSourceType];
  if (comp) {
    currentComp.value = comp;
    dialogVisible.value = true;
    readonly.value = true;
  }
};
</script>

<style scoped lang="less">
@import "./DataSourceGroup.less";
</style>
